<!-- upload-file 上传组件 -->
<template>
  <div class="upload-file">
    <!-- <h6 class="upload-file-title"><i class="must-entry" v-if="hKind !== '0'">*</i><span class="upload-name">附件</span><span class="financial-reimbursement-biezhen financial-reimbursement-iconfont"></span></h6> -->
    <!-- <div class="step-upload"><slot></slot></div> -->
    <input type="file" accept="image/*" v-show="false" @change="submitFileImgFunc($event, $event.currentTarget)" ref="imgRef" />
    <dl class="upload-file-container">
      <dt class="upload-file-add" @click="$refs['imgRef'].click()">
        <div class="upload-file-add-container">
          <span class="financial-reimbursement-plus financial-reimbursement-iconfont"></span>
          <span class="upload-file-add-img">添加图片</span>
        </div>
      </dt>
      <dd class="upload-file-list" v-for="(item,index) in imgData" :key="index" @click="exhibitionImgFunc(item)">
        <span class="upload-file-remove" @click.stop="deleteImgFunc(index)">×</span>
       <img :src="item" >
      </dd>
    </dl>
    <div v-if="exhibition_img" class="exhibition-img">
      <img :src="big_img">
      <span class="exhibition-img-close" @click="closeShadeFunc">×</span>
    </div>
  </div>
</template>

<script>
import myClass from '@/assets/js/common'
import {Toast} from 'mint-ui'
export default {
  name: 'upload',

  data () {
    return {
      imgData: [], // 选择的图片按数组放进去 
      exhibition_img: false, // 展示图显示 false隐藏
      big_img: '' // 选中展示的图片base64
    }
  },
  props: {
    'httpImgArr': {default: ''},

    // 0 不校验 1校验下是否为空 2校验下是否为数字
    'h-kind': {
      default: '0',
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['0', '1', '2', '3'].indexOf(value) !== -1
      }
    },
  },
  watch: {
    httpImgArr (afterValue, beforeValue) {
      this.imgData = afterValue
      let imgArr = this.imgData.map(v => {
        return v.split(',')[1]
      })
      this.$emit('imgArr', imgArr.join(','))
    }
  },
  components: {},

  computed: {},

  methods: {
    closeShadeFunc () {
      this.exhibition_img = false
      this.$store.commit('mutateChangeZIndex', {
        overHidden: false,
        zIndex: 9
      })
    },
    // 放大展示的图片
    exhibitionImgFunc (src) {
      this.$store.commit('mutateChangeZIndex', {
        overHidden: true,
        zIndex: -1
      })
      this.exhibition_img = !this.exhibition_img
      this.big_img = src
    },
    // 拍照或者选中图片
    submitFileImgFunc (e, target) {
      myClass.photoCompress(1, target, this.callBackFunc)
    },
    // 删除图片
    deleteImgFunc (index) {
      this.$refs['imgRef'].value = ''
      this.imgData.splice(index, 1)
        let imgArr = this.imgData.map(v => {
          return v.split(',')[1]
        })
        this.$emit('imgArr', imgArr.join(','))
    },
    // 拍照选中图片回调
    callBackFunc (obj) {
      if (obj.size / 1024 / 1024 > 4) {
        Toast('图片大小不能大于4M')
      } else {
        this.imgData.push(obj.beforeBase64)
        let imgArr = this.imgData.map(v => {
          return v.split(',')[1]
        })
        this.$emit('imgArr', imgArr.join(','))
      }
    }
  },
  created () {
  },
  mounted () {}
}
</script>
<style lang="stylus" scoped>
$rem = 2.5
.upload-file
  background-color #ffffff
  border-radius 0.1rem * $rem
  // box-shadow 0 0.05rem 0.3rem 0.01rem rgba(150,150,150,0.68)
  .step-upload
    width 100%
    height 1.15rem * $rem
    border-radius 0.25rem 0.25rem 0 0 / 0.25rem 0.25rem 0 0
    background-image url(../../assets/img/bg-01.png)
    background-position center
    background-repeat no-repeat
    display flex
    justify-content center
    align-items center
    font-size 0.32rem * $rem
    color #ffffff
    font-weight 400
  .upload-file-title
    position relative
    display flex
    justify-content space-between
    align-items center 
    padding  0.5rem * $rem  0.18rem * $rem 0.5rem * $rem 0.22rem * $rem
    border-bottom 0.02rem * $rem solid #dddddd
    .must-entry
      position absolute
      display flex
      align-items center
      height 100%
      top 0
      left 0.06rem * $rem
      font-size 0.3rem * $rem
      color #ff6b6b
      font-style normal
      line-height normal
    .upload-name
      font-size 0.3rem * $rem
      color #1a1e24
      font-weight bold
    .financial-reimbursement-iconfont
      font-size 0.55rem * $rem
      line-height 0.4rem * $rem
      font-weight 400
      color #bfbfbf
  .upload-file-container
    display flex
    flex-flow row wrap
    justify-content flex-start
    align-items flex-start
    width 100%
    padding 0.23rem * $rem
    min-height 3.2rem * $rem
    .upload-file-add
      width 25%
      box-sizing border-box
      padding-right 0.15rem * $rem
      .upload-file-add-container
        display flex
        flex-flow column nowrap
        justify-content center
        align-items center
        border 1px dashed #c6c6c6
        height 1.49rem * $rem
      .financial-reimbursement-plus
        display flex
        width 0.6rem * $rem
        height 0.6rem * $rem
        flex-flow row nowrap
        justify-content center
        align-items center
        border-radius 50%
        background-color #5094f3
        color #ffffff
        font-size 0.36rem * $rem
      .upload-file-add-img
        padding-top 0.1rem * $rem
        font-size 0.26rem * $rem
        color #919191
    .upload-file-list
      position relative
      width 25%
      box-sizing border-box
      padding-right 0.15rem * $rem
      margin-top 0.15rem * $rem
      .upload-file-remove
        position absolute
        top -0.1rem * $rem
        right -0.1rem * $rem
        display inline-block
        width 0.3rem * $rem
        height @width
        line-height @width
        background-color #ff0000
        color #ffffff
        font-size 0.26rem * $rem
        border-radius 50%
        text-align center
      img
        max-width 100%
  .exhibition-img
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background-color rgba(0,0,0,1)
    z-index 99
    img
      max-width 100%
    .exhibition-img-close
      position absolute
      bottom 0.5rem * $rem
      left 0
      right 0
      width 0.8rem * $rem
      height @width
      margin 0 auto
      line-height 0.6rem * $rem
      text-align center
      font-size 0.8rem * $rem
      border-radius 50%
      border 2px solid #28a2ff
      color #28a2ff
</style>
